<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>齐博著名的开源软件提供商</title>
<meta name="keywords" content=''>
<meta name="description" content=''>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="/public/static/css/base.css">
<link rel="stylesheet" href="/public/static/css/qb_ui.css">
<link rel="stylesheet" href="/public/static/icon/icon.css">
<script type="text/javascript" src="/public/static/js/core/jquery.min.js"></script>
<script type="text/javascript" src="/public/static/layer/layer.js"></script>
</head>
<body>

<style type="text/css">
div, p, dl, dt, dd,td,span,em,li,a,h3,h4{
	font-family: Microsoft YaHei,Arial, Helvetica, sans-serif;
}
em,i{font-style:normal;}

/* rmbpay */
*:focus{outline:none;}
.RmbPay{width:100%; margin:0 auto; background:#fafafa;margin-bottom:10px;}
.payHead{height:100px; background:#fff; margin-top:10px; border:1px solid #eee; border-bottom:1px solid #eee; box-shadow:1px 2px 2px #eee;}
.payHead span{display:inline-block;}
.payHead .payMoney{height:32px; margin-top:40px; margin-left:60px; padding-left:32px; line-height:36px; background:url("rmpay.gif") -20px 0px no-repeat; font-size:25px; color:#1196e7; font-weight:600;}
.payHead .syingt{padding-left:35px; margin-left:35px; border-left:1px solid #ccc; font-size:18px;}
.pay-section{margin-top:14px; padding:0 35px; background:#fff; border-radius:2px; box-shadow:0px 0px 2px 2px #ececec; border:1px solid #ececec;}
.pay-section .payAll{height:95px;  box-shadow:0px 1px 0px #dfdfdf; border-bottom:1px solid #dfdfdf;}
.payAll span{float:left;}
.payAll .payAll-1{margin-top:30px;}
.payAll .payAll-1 em{display:block;}
.payAll .payAll-1 .payAll-1a{background:url("rmpay.gif") -20px -42px no-repeat; padding-left:20px; font-size:14px; display:block;}
.payAll .payAll-1 .payAll-1b{padding-left: 20px; color:#9e9e9e; font-size:14px; padding-top:6px;}
.payAll .payAll-2{margin-top:35px; padding-left:167px; font-size:18px;}
.payAll .payAll-2 em{ color:#ff6500;}
.paySheng{padding:12px 0px 12px 30px; line-height:35px; font-size:18px; border-bottom:1px dashed #dfdfdf;}
.s-color{color:#ff6500;}
.s-color2{color:#737373; padding-left:20px;}
.payPw{padding:30px 0 10px 30px; height:35px; line-height:35px; font-size:18px; border-bottom:1px dashed #dfdfdf;}
.payPw input{border:1px solid #ff6500; height:30px; width:234px;}
.payBt{padding:20px 0 0 100px;}
.payBt input{width:231px; height:49px; border:0; background:#ff6600; border-radius:5px; box-shadow:2px 2px 2px #dfdfdf; font-size:18px; color:#fff;}
.payInfo{margin-top:50px; padding-left:35px; margin-bottom:42px; font-size:16px; height:30px;}
.payInfo span{float:left;}
.payInfo-1{background:url("rmpay.gif") -20px -80px no-repeat; padding-left:42px; padding-right:40px; line-height:35px;}
.payInfo-2{background:url("rmpay.gif") -20px -142px no-repeat;  line-height:30px; padding-left:80px;}
.payInfo-2 a{color:#ff6500; font-size:20px; font-weight:600; }
/* olpay */
/* .wxHead {background:url("wx.png") -5px 34px no-repeat;} */
.payHead .payWx{/* background:none;  color:#11cd6e;*/padding-left:52px; }
.pay-section .wxAll{padding-left:30px; border-bottom:1px dashed #dfdfdf; box-shadow:none;}
.wxSheng{padding-left:30px; overflow:hidden;}
.wxSheng .wxS1{float:left; height:24px; margin-top:10px; line-height:28px; background:url("wx.png") -83px -254px no-repeat; color:#505050; padding-left:24px;}
.wxSheng .payList{float:left;}
.wxSheng .payList li{position:relative; float:left; padding:3px 0; background:#fcf9f9; margin-right:10px; margin-bottom:10px; cursor:pointer; border:1px solid #e1e1e1;}
.wxSheng .payList li.active{border:1px solid #f86868;}
.wxSheng .payList li em{position:absolute; width:18px; height:18px;right:0; bottom:0;}
.wxSheng .payList li  input{position:absolute; width:169px; height:48px; left:0; top:0; opacity:0; filter:Alpha(opacity=0)}
.wxSheng .payList li.active em{background:url("wx.png") -82px -282px no-repeat;}
.wxSheng .payList .payImg{display:block; width:110px; text-align:center; padding-left:5px; color:green; height:40px; line-height:40px; }
.wxSheng .payList .wxImg{background:url("wx.png") -46px -66px no-repeat;}
.wxSheng .payList .alipays{background:url("alipays.png") 12px center no-repeat;}
.wxBt{padding-top:35px; padding-bottom:10px;}
.wxBt a{display:block; width:100px; height:49px; line-height:49px; text-align:center; border:0; background:#ff6600; border-radius:5px; box-shadow:2px 2px 2px #dfdfdf; font-size:18px; color:#fff;}
.wxList{padding-left:30px; line-height:35px; font-size:16px;}
.wxList .b{color:#ff6500;}
/* wxpay */
.payHead .wxSao{height:50px; margin-top:10px; padding-top:20px; padding-left:100px; background:url("wx.png") -28px -114px no-repeat; }
.wxS .syingt{float:right; border-left:0; margin-top:38px; padding-right:30px;}
.wxS .syingt a{font-size:18px; color:#5c81ee; text-decoration:underline;}
.er-section{text-align:center; padding:50px 0;}
.er-section .erwM img{width:260px; height:260px;}
.er-section .saoInfo{margin-top:50px; height:51px; background:url("wx.png") 387px -198px no-repeat;}
.er-section .saoInfo span{float:left; font-size:16px; color:#b4b4b4;}
.er-section .saoInfo1{overflow:hidden; padding-left:500px;}
.er-section .saoInfo1 .s-color1{color:#ff6600;}
.er-section .saoInfo1 .s-color2{color:#0066cc; margin-left:30px; padding-left:30px; border-left:1px solid #b4b4b4;}
.er-section .saoInfo2{margin-top:12px; padding-left:494px; text-align:left; font-size:16px; color:#8d8d8d;}
/* rmb-add */
.wxAdd{padding:25px 20px 25px 20px; border:1px solid #ededed;}
.wxAdd-head{border-bottom:1px dashed #dfdfdf; padding-bottom:36px; overflow:hidden;}
.wxAdd-head span{display:block; color:#505050; font-size:18px;}
.wxAdd-head .wxAdd-head2{float:left; margin-right:10px; position:relative; width:210px; margin-top:25px; border:1px solid #f86868; background:#fcf9f9;}
.wxAdd-head .wxAdd-head2 i{display:block; height:54px; width:110px; font-style:normal; background:url("wx.png") -33px 3px no-repeat; padding-left:80px; line-height:54px;}
.wxAdd-head .alipays i{background:url("alipay.png") 15px 2px no-repeat;}
.wxAdd-head .wxAdd-head2 em{position:absolute; width:18px; height:18px;right:0; bottom:0; background:url("wx.png") -82px -282px no-repeat;}
.wx-section{margin:5px 8px 0px 8px; background:#fcfbfb; border:1px solid #ff6600; border-top:5px solid #ff6600; padding:18px 0; overflow:hidden;}
.wx-section .wxSectionL{float:left; width:100%; text-align:center;}
.wxSectionL span,.wxSectionR span{display:block; font-size:18px;}
.wxSectionL .addSx{color:#505050; padding:30px 0 40px 0;}
.wxSectionL .addSx b{color:#ff6801;}
.wxSectionL .addMoney input{width:230px; height:60px; border:2px solid #fa7967; border-radius:5px; padding-left:15px;}
.wxSectionL .addBt{margin-top:36px;}
.wxSectionL .addBt input{width:160px; height:58px; border:0; border-radius:5px; background:#ff6600; color:#fff; box-shadow:2px 2px 2px #dfdfdf;}
.wx-section .wxSectionR{float:right; width:569px; height:273px; border-left:1px dashed #dfdfdf; text-align:center;}
.wxSectionR .add-saoT{height:40px; line-height:40px; margin-top:10px; /* background:url("wxadd.gif") 162px 8px no-repeat; */}
.wxSectionR .add-saoE{margin-top:10px;}
.wxSectionR .add-saoE img{ width:210px; height:210px;}
</style>
<div class="RmbPay">

  <div class="pay-section">
    <p class="payAll wxAll">
	  <span class="payAll-1"><em class="payAll-1a glyphicon glyphicon-yen">你当前可用余额 <b style="color:blue;">{$userdb.rmb}</b> 元</em><em class="payAll-1b">提醒:余额若不足,请使用支付宝或微信支付</em></span>
	  <span class="payAll-2">本次需要支付：<em>{$money}</em> 元</span>
	</p>
	
	<div class="paySheng wxSheng" style="display:table;width:100%;">

	  <ul class="payList">
        <li class='active'><em></em><input type='radio' checked name='paytype' value='alipay'/><span style="color:#059CD8;" class='payImg wxImg fa fa-buysellads'> 支付宝</span></li>

		  <li><em></em><input type='radio' name='paytype' value='weixin'/><span class='payImg wxImg fa fa-wechat'> 微信支付</span></li>       
{if $userdb.rmb>=$money}
		<li><em></em><input type='radio' name='paytype' value='rmb'/><span {if $money>$userdb.rmb} onclick="layer.alert('你余额不足,不能使用余额支付!')" {/if} style="color:#B94303;" class='payImg wxImg glyphicon glyphicon-yen'>余额支付</span></li>
{/if}
    </ul>
	</div>
	<p class="payBt wxBt">
	  <a href="javascript:paytype();">下一步</a>
	</p>
  </div>
</div>
<script language="JavaScript">
<!--
function paytype(){
	var type='';
	$(".payList input").each(function(i){
		if($(this).attr('checked')){type = $(this).val();}
	});
	if(type==''){
		alert("请选择一种支付类型!");
		return ;
	}
	window.location.href="{$weburl}&banktype="+type;
}
$(".payList li").click(function(){
    $(this).addClass("active").siblings().removeClass("active");
	$(".payList li input").attr("checked",false);
	$(this).find("input").attr("checked",true);
});
//-->
</script>
</body>
</html>
